<template>
 <div class="Login">
        <div class="T">
          <svg class="icon" aria-hidden="true" @click="goto('adminlogin')">
            <use xlink:href="#icon-guanliyuan"></use>
          </svg>
            <h1>物易近——用户登录</h1>
        </div>
        <div class="A">
            <span class="e"><router-link to="/"><strong>用户登录 |</strong></router-link></span>
            <span class="p"><router-link to="/workerlogin"><strong>跑腿员登录</strong></router-link></span>
            <form :v-model="user">
            <div class="a">
                <span>用户名</span>
                <input type="text"  placeholder="请输入用户名" v-model="user.username"><br>
            </div>
            <div class="b">
                <span>密码</span>
                <input type="password"  placeholder="请输入密码" v-model="user.password"><br>
            </div>
            <div class="f">
                <div class="c">
                    <input type="submit" value="登录" @click="login()">
                </div>
    
                <button class="d"><router-link to="/uregister"><span>注册</span></router-link></button>

            </div>
            
            <a class="floatR" @click="isChangePassword = true">忘记密码？点击此处找回密码</a>
            
        </form>
        </div>
    <!-- 忘记密码弹窗 -->
    <el-dialog v-model="isChangePassword"  title="找回密码" center>
      <el-form
        :model="form"
        :rules="rules"
        ref="userForm"
        style="width: 500px; margin: auto"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenum">
          <el-input
            v-model="form.phonenum"
            @input="form.phonenum = form.phonenum.replace(/^(0+)|[^\d]+/g, '')"
            maxlength="11"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="新的密码" prop="password">
          <el-input
            v-model="form.password"
            style="width: 400px"
            type="password"
            autocomplete="new-password"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="update()">确定修改</el-button>
          <el-button type="primary" @click="isChangePassword = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
   import router from "../router"
const goto=(name)=>{
    router.push({name:name});
}
</script>


<script>
import axios from "axios"
import { getApi, postApi, deleteApi, updateApi } from "@/util/api";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      isChangePassword: false,
      form: {
        username: "",
        phonenum: "",
        password: "",
      },
      rules: {
        username:[
          { required: true, message: "请输入你的账号", trigger: "blur" },
        ],
        phonenum: [
          { required: true, message: "请输入你的手机号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入新的密码", trigger: "blur" },
          { min: 6, message: "密码长度不低于6位数", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    login() {
      var param = "?username=" + this.user.username;
      param += "&password=" + this.user.password;

      console.log(param);
      axios.post("users/login",{
        username:this.user.username,
        password:this.user.password
      })
        .then((res) => {
          if (res.data.code == 1) {
            ElMessage.success("登录成功！");
            window.sessionStorage.setItem("token", res.data.data);
            this.$router.push({ name: "usersfirst" });
          } else {
            ElMessage.error("账号或密码错误，请重新输入！");
          }
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        }).finally(()=>{
          this.user = {}
        });
    },
    //修改
    
    update() {
       this.$refs['userForm'].validate((valid)=>{
        if(valid){
          updateApi("users/resetpassword", {},this.form).then((res) => {
            if (res.data.code == 1) {
              ElMessage.success("修改成功");
              this.isChangePassword = false;
            }
            else if(res.data.code == 20004){
              ElMessage.warning("该用户不存在，请检查输入的内容");
              this.isChangePassword = false;
            }
          }).finally(()=>{
              this.form={};
          });
        }
        else {
          return false;
        }
      })


    },
  },
};
</script>

<style lang="scss" scoped>
.Login {
  background: url("../assets/img/1.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  
}
.T {
  text-align: center;
  color: rgb(125, 118, 118);
}
.A {
  border: 1px solid #dccfcf;
  width: 350px;
  margin: 180px auto;
  padding: 35px 80px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color: rgba(255, 255, 255, 0.7);
  .e {
    font-size: 28px;
    padding-left: 20%;
  }
  .p {
    font-size: 28px;
    padding-left: 6px;
  }
  .a {
    margin-top: 70px;
    margin-left: 20px;
    input {
      margin-left: 15px;
    }
  }
  .b {
    margin-top: 25px;
    margin-left: 20px;
    input {
      margin-left: 30px;
    }
  }

  .f {
    margin-top: 50px;
    display: flex;
    .c {
      margin-left: 20%;
      input {
        background-color: #fff;
        width: 80px;
        height: 32px;
      }
    }
    .d {
      width: 80px;
      height: 32px;
      background-color: rgba(0, 0, 0, 0.5);
      span {
        color: #fff;
      }
      margin-left: 20%;
    }
  }
  .floatR {
    margin-top: 40px;
    margin-left: 25%;
    font-size: 13px;
    color: rgb(0, 94, 255);
  }
}
.ti {
  text-align: center;
}
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  top: 10px;
  left: 15px;
  position: absolute;
}
</style>